<template>
  <div id="allmap"></div>
</template>
<script>
import styleJson from "../../../assets/js/custom_map_config.json";
import "@/assets/js/info_box.js";
import { loadScript } from "../../../assets/js/map";
export default {
  name: "Maps",
  data() {
    return {
      mapPoints: [
        {
          x: 30.312903,
          y: 120.382029,
          title: "上海",
          branch: "上海事务所",
        },
        {
          x: 30.215855,
          y: 120.024568,
          title: "宁波",
          branch: "宁波事务所",
        },
        {
          x: 30.18015,
          y: 120.174968,
          title: "徐州",
          branch: "徐州事务所",
        },
        {
          x: 30.324994,
          y: 120.164399,
          title: "美国",
          branch: "美国事务所",
        },
        {
          x: 30.24884,
          y: 120.305074,
          branch: "澳大利亚事务所",
        },
      ],
      list_info: [],
      map: null,
      closeInfoBox: Number,
    };
  },
  mounted() {
    let that = this;
    new Promise((resolve) => {
      var map = new BMapGL.Map("allmap", { minZoom: 2, maxZoom: 6 }); // 创建Map实例
      map.setMapStyleV2({
        styleJson: styleJson,
      });
      map.centerAndZoom(new BMapGL.Point(116.404844, 39.91405), 4); // 初始化地图,设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      return resolve(map);
    }).then((res) => {
      that.map = res;
    });
  },
  props: ["office_list", "index"],
  watch: {
    office_list(val, oldval) {
      this.list_info = val;
      for (var index = 0; index < this.list_info.length; index++) {
        this.addMark(this.list_info[index], index); //传递当前数据 以及当前数据索引  开启/关闭弹窗
      }
    },
    index(val, oldval) {
      this.index = val;
      this.changeInfo(this.list_info[this.index], this.index);
    },
  },
  methods: {
    addMark(item, index) {
      let that = this;
      var points = new BMapGL.Point(item.XY[0], item.XY[1]); //创建坐标点
      var markers = new BMapGL.Marker(points);
      that.map.addOverlay(markers);
      markers.addEventListener("click", (event) => {
        var points = new BMapGL.Point(item.XY[0], item.XY[1]); //创建坐标点
        var html = `<div class="info_box"><p><span>名称：</span>${item.name}</p><p><span>电话 ：</span>${item.tel}</p><p><span>地址：</span>${item.address}</p></div>`;
        var infoBox = new BMapLib.InfoBox(that.map, html, {
          boxStyle: {
            width: "395px",
            // height: "220px"
          },
          closeIconMargin: "1px 1px 0 0",
          closeIconUrl: null,
          enableAutoPan: true,
          offset: new BMapGL.Size(0, 20),
        });
        if (
          typeof that.closeInfoBoxIndex == "number" ||
          typeof that.closeInfoBoxIndex == "string"
        ) {
          let box = document.getElementById("platform").children[1].children[0];
          box.innerHTML = "";
        }
        that.closeInfoBoxIndex = index;
        infoBox.open(points);
        that.map.centerAndZoom(new BMapGL.Point(item.XY[0], item.XY[1]), 10);
      });
    },
    //打开信息弹窗并且改变缩放比例
    changeInfo(item, index) {
      let that = this;
      var points = new BMapGL.Point(item.XY[0], item.XY[1]); //创建坐标点
      var html = `<div class="info_box"><p><span>名称：</span>${item.name}</p><p><span>电话 ：</span>${item.tel}</p><p><span>地址：</span>${item.address}</p></div>`;
      var infoBox = new BMapLib.InfoBox(that.map, html, {
        boxStyle: {
          width: "395px",
          // height: "220px"
        },
        closeIconMargin: "1px 1px 0 0",
        closeIconUrl: null,
        enableAutoPan: true,
        offset: new BMapGL.Size(0, 20),
      });
      if (
        typeof that.closeInfoBoxIndex == "number" ||
        typeof that.closeInfoBoxIndex == "string"
      ) {
        let box = document.getElementById("platform").children[1].children[0];
        box.innerHTML = "";
      }
      that.closeInfoBoxIndex = index;
      infoBox.open(points);
      that.map.setCenter(points);
    },
  },
};
</script>
<style scoped>
#allmap {
  width: 100%;
  height: 100%;
}
</style>
